<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Pseudo-Elements - Cascading Style Sheets Syntax</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<h1 align="center"><span class="pagetitle">Pseudo-elements</span></h1>
<div align="center"><b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
[<b class="s">IE5.5B1</b>|<b class="s">N6</b>|<b><i class="fs">O3.5</i></b>|<b class="s">S1</b>]<br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font></div>

<div align="center">
<table border=3 cellpadding=5 cellspacing=0><tr>
<td><font size=2><a href="../../index.html">Main Index</a> |
    <a href="../../propindex/font.htm">Property Index</a> |
    <a href="../../supportkey/syntax.htm">CSS Support History</a> |
    <a href="../../../history/browsers.htm">Browser History</a></font></td>
</tr></table>
</div>

<dl>
<dt><big><b class="mainheading">What Are They?</b></big>
    <dd>Pseudo-elements allow logical elements to be defined which are not actually in
        the document element tree. Logical elements allow implied semantic structure to
        be addressed in CSS selectors, giving more power to the CSS author.  Pseudo-elements
        can also address generated content that is not in the source document (with the
        'before' and 'after' pseudo-elements.) Pseudo-elements may only be applied to
        external and document-level contexts - not to in-line styles.
        <br><br>

        CSS2 notes a few syntax caveats about pseudo-elements:
        <ul type="disc">
        <li>They may only appear <em>AFTER</em> the subject of the selector for a CSS rule.<br>
            (eg: After other classes and pseudo-classes - <b class="selector">blockquote.foo:first-letter</b>
            { <span class="property">color:</span> red } )<br>
            (eg: Within a contextual selector -  <b class="selector">body p:first-line</b>
            { <span class="property">margin-left:</span> 2.0cm } )<br>
        <li>Only one Pseudo-Element can be specified per Selector. To address multiple pseudo-elements
            on a single element structure, multiple style Selector/Declaration statements must be made.<br>
            (eg: <b class="selector">blockquote.foo:first-letter</b> { <span class="property">color:</span> red }<br>
            &#160;&#160;&#160;&#160;&#160;&#160;&#160;<b class="selector">blockquote.foo:first-line</b>
            { <span class="property">margin-left:</span> 0.5in } )
        <li>Browsers are allowed to support only a subset of CSS properties for the :first-line
            and :first-letter pseudo-elements and still be considered legally 'conformant'.
        <li>Browsers are also allowed to ignore the :first-line and :first-letter pseudo-elements
            completely in CSS selectors and still be considered legally 'conformant'.
        </ul>
</dl>

<dl>
<dt><big><b class="mainheading">Syntax</b></big>
    <dd>Ext/Doc: <b class="selector">[element]:[pseudo-element]</b>
        { <span class="property">property:</span> value }
</dl>

<dl>
<dt><big><b class="mainheading">CSS Pseudo-Elements</b></big>
<dt><a href="pelembefore.htm">before</a> 
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]
     <dd>Addresses content that occurs before an element

<dt><a href="pelemafter.htm">after</a> 
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]
     <dd>Addresses content that occurs after an element

<dt><a href="pelemfirstletter.htm">first-letter</a> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE5.5B1</b>|<b class="s">N6</b>|<b><i class="fs">O3.5</i></b>|<b class="s">S1</b>]
     <dd>Indicates the first rendered letter/character for a block-level element

<dt><a href="pelemfirstline.htm">first-line</a> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE5.5B1</b>|<b class="s">N6</b>|<b><i class="fs">O3.5</i></b>|<b class="s">S1</b>]
  <dd>Indicates the first rendered line on the output device of a block-level element
</dl>

<br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>